<template>
	<div style="display: flex; gap: 20px; flex-wrap: wrap" class="bg-white dark:bg-black">
		<router-link to="/">Home</router-link>
		<router-link to="/setup">setup</router-link>
		<router-link to="/model">v-model</router-link>
		<router-link to="/emit">emit</router-link>
		<router-link to="/ref">ref</router-link>
		<router-link to="/toRef">toRef</router-link>
		<router-link to="/reactive">reactive</router-link>
		<router-link to="/bind">bind</router-link>
		<router-link to="/props">props</router-link>
		<router-link to="/attrs">attrs</router-link>
		<router-link to="/mixins">mixins</router-link>
		<router-link to="/pinia">pinia</router-link>
		<router-link to="/provide-inject">provide-inject</router-link>
		<router-link to="/SFC">SFC</router-link>
		<router-link to="/hook">hook</router-link>
		<router-link to="/Suspense">Suspense</router-link>
		<router-link to="/teleport">teleport</router-link>
		<router-link to="/TS">TS</router-link>
		<router-link to="/script-setup">script-setup</router-link>
		<router-link to="/directive">directive</router-link>
		<router-link to="/prop-attr">prop-attr</router-link>
		<router-link to="/watch">watch</router-link>
		<router-link to="/component">动态component</router-link>
		<router-link to="/mitt">mitt(event bus)</router-link>
		<router-link to="/custom-plugins">custom-plugins</router-link>
		<router-link to="/transition">transition</router-link>
		<router-link to="/css">css</router-link>
		<router-link to="/VueUse">VueUse</router-link>
		<pre
			>{{
				[
					{ name: 'deng', age: 20 },
					{ name: 'lei', age: 20 },
				]
			}}
		</pre
		>
	</div>

	<!-- teleport容器 -->
	<div id="box"></div>

	<div style="border: 1px solid; padding: 20px; margin-top: 20px">
		<router-view v-slot="{ Component, route }">
			<!-- <transition name="fade" mode="out-in"> -->
			<keep-alive>
				<component :is="Component" :key="route.fullPath" />
			</keep-alive>
			<!-- </transition> -->
		</router-view>
	</div>
</template>

<script setup lang="ts">
// function sum(a, b) {
// 	return a + b;
// }
// let res = new Function('get', 'return get(1,2)')(sum);
// console.log(res);
</script>

<style>
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>
